<template>
  <el-drawer v-model="drawerVisible" title="布局设置" size="290px">
    <!-- 布局样式 -->
    <el-divider class="divider" content-position="center">
      <el-icon><Notification /></el-icon>
      布局样式
    </el-divider>
    <div class="layout-box">
      <el-tooltip effect="dark" content="纵向" placement="top" :show-after="200">
        <div :class="['layout-item layout-vertical', { 'is-active': globalStore.layout == 'vertical' }]" @click="setLayout('vertical')">
          <div class="layout-dark"></div>
          <div class="layout-container">
            <div class="layout-light"></div>
            <div class="layout-content"></div>
          </div>
          <el-icon v-if="globalStore.layout == 'vertical'">
            <CircleCheckFilled />
          </el-icon>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="经典" placement="top" :show-after="200">
        <div :class="['layout-item layout-classic', { 'is-active': globalStore.layout == 'classic' }]" @click="setLayout('classic')">
          <div class="layout-dark"></div>
          <div class="layout-container">
            <div class="layout-light"></div>
            <div class="layout-content"></div>
          </div>
          <el-icon v-if="globalStore.layout == 'classic'">
            <CircleCheckFilled />
          </el-icon>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="横向" placement="top" :show-after="200">
        <div :class="['layout-item layout-transverse', { 'is-active': globalStore.layout == 'transverse' }]" @click="setLayout('transverse')">
          <div class="layout-dark"></div>
          <div class="layout-content"></div>
          <el-icon v-if="globalStore.layout == 'transverse'">
            <CircleCheckFilled />
          </el-icon>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="分栏" placement="top" :show-after="200">
        <div :class="['layout-item layout-columns', { 'is-active': globalStore.layout == 'columns' }]" @click="setLayout('columns')">
          <div class="layout-dark"></div>
          <div class="layout-light"></div>
          <div class="layout-content"></div>
          <el-icon v-if="globalStore.layout == 'columns'">
            <CircleCheckFilled />
          </el-icon>
        </div>
      </el-tooltip>
    </div>
    <div class="theme-item">
      <span>
        侧边栏反转色
        <el-tooltip effect="dark" content="侧边栏颜色变为深色模式" placement="top">
          <el-icon><QuestionFilled /></el-icon>
        </el-tooltip>
      </span>
      <el-switch v-model="asideInverted" @change="setAsideTheme" />
    </div>
    <div class="theme-item mb50">
      <span>
        头部反转色
        <el-tooltip effect="dark" content="头部颜色变为深色模式" placement="top">
          <el-icon><QuestionFilled /></el-icon>
        </el-tooltip>
      </span>
      <el-switch v-model="headerInverted" @change="setHeaderTheme" />
    </div>

    <!-- 全局主题 -->
    <el-divider class="divider" content-position="center">
      <el-icon><ColdDrink /></el-icon>
      全局主题
    </el-divider>
    <div class="theme-item">
      <span>主题颜色</span>
      <el-color-picker v-model="primary" :predefine="colorList" @change="changePrimary" />
    </div>
    <div class="theme-item">
      <span>暗黑模式</span>
      <SwitchDark />
    </div>
    <div class="theme-item">
      <span>灰色模式</span>
      <el-switch v-model="isGrey" @change="changeGreyOrWeak('grey', !!$event)" />
    </div>
    <div class="theme-item mb40">
      <span>色弱模式</span>
      <el-switch v-model="isWeak" @change="changeGreyOrWeak('weak', !!$event)" />
    </div>

    <!-- 界面设置 -->
    <el-divider class="divider" content-position="center">
      <el-icon><Setting /></el-icon>
      界面设置
    </el-divider>
    <div class="theme-item">
      <span>菜单折叠</span>
      <el-switch v-model="isCollapse" @change="changeValue('isCollapse', $event)" />
    </div>
    <div class="theme-item">
      <span>菜单手风琴</span>
      <el-switch v-model="accordion" @change="changeValue('accordion', $event)" />
    </div>
    <div class="theme-item">
      <span>水印</span>
      <el-switch v-model="watermark" @change="changeValue('watermark', $event)" />
    </div>
    <div class="theme-item">
      <span>面包屑</span>
      <el-switch v-model="breadcrumb" @change="changeValue('breadcrumb', $event)" />
    </div>
    <div class="theme-item">
      <span>面包屑图标</span>
      <el-switch v-model="breadcrumbIcon" @change="changeValue('breadcrumbIcon', $event)" />
    </div>
    <div class="theme-item">
      <span>标签栏</span>
      <el-switch v-model="tabs" @change="changeValue('tabs', $event)" />
    </div>
    <div class="theme-item">
      <span>标签栏图标</span>
      <el-switch v-model="tabsIcon" @change="changeValue('tabsIcon', $event)" />
    </div>
    <div class="theme-item">
      <span>页头</span>
      <el-switch v-model="header" @change="changeValue('header', $event)" />
    </div>
    <div class="theme-item">
      <span>页脚</span>
      <el-switch v-model="footer" @change="changeValue('footer', $event)" />
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useTheme } from "@/management/hooks/useTheme";
import { type LayoutType } from "@/management/store/layouts/interface";
import mittBus from "@/utils/mitt";
import SwitchDark from "@/layouts/components/SwitchDark/index.vue";
import { useStore } from 'vuex'
const store = useStore()
const globalStore = computed(() => store.state.layouts.globalState)

const { changePrimary, changeGreyOrWeak, setAsideTheme, setHeaderTheme } = useTheme();

const DEFAULT_PRIMARY: string = "#0081fa";
const primary = ref('')
primary.value = globalStore.value.primary
const tabs = ref('')
tabs.value = globalStore.value.tabs
const tabsIcon = ref('')
tabsIcon.value = globalStore.value.tabsIcon
const isGrey = ref('')
isGrey.value = globalStore.value.isGrey
const isWeak = ref('')
isWeak.value = globalStore.value.isWeak
const asideInverted = ref('')
asideInverted.value = globalStore.value.asideInverted
const headerInverted = ref('')
headerInverted.value = globalStore.value.headerInverted
const isCollapse = ref('')
isCollapse.value = globalStore.value.isCollapse
const accordion = ref('')
accordion.value = globalStore.value.accordion
const watermark = ref('')
watermark.value = globalStore.value.watermark
const breadcrumb = ref('')
breadcrumb.value = globalStore.value.breadcrumb
const footer = ref('')
footer.value = globalStore.value.footer
const header = ref('')
header.value = globalStore.value.header
const breadcrumbIcon = ref('')
breadcrumbIcon.value = globalStore.value.breadcrumbIcon
// const footer = computed(() => store.state.layouts.globalState.footer)

// 预定义主题颜色
const colorList = [
  DEFAULT_PRIMARY,
  "#daa96e",
  "#0c819f",
  "#409eff",
  "#27ae60",
  "#ff5c93",
  "#e74c3c",
  "#fd726d",
  "#f39c12",
  "#9b59b6"
];

// 设置布局方式
const setLayout = (val: LayoutType) => {
  store.dispatch('layouts/setGlobalState', { "layout": val })
  setAsideTheme();
};

const changeValue = (key: string, val: boolean) => {
  console.log(key, val);
  store.dispatch('layouts/setGlobalState', { [key]: val })
};

// 打开主题设置
const drawerVisible = ref(false);
mittBus.on("openThemeDrawer", () => (drawerVisible.value = true));

</script>

<style scoped lang="scss">
@use "./index.scss";
</style>
